<template>
  <a-modal v-model:visible="modalVisible" title="查看健康档案" width="80%" :footer="null" @cancel="cancle">
    <!-- 描述列表 -->
    <a-descriptions bordered :column="{ xxl: 4, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }">
      <a-descriptions-item label="姓名">{{ health.realName }}</a-descriptions-item>
      <a-descriptions-item label="电话">
        <a-tag color="blue"> {{ health.telephone }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="紧急联系人电话">
        <a-tag color="blue"> {{ health.urgentContact }}</a-tag></a-descriptions-item
      >

      <a-descriptions-item label="身份证号" :span="2">{{ health.idCard }}</a-descriptions-item>
      <a-descriptions-item label="与被服务人的关系">
        <a-tag color="#f50"> {{ health.familyRelation }}</a-tag>
      </a-descriptions-item>
      <a-descriptions-item label="过敏史">{{ health.allergy }}</a-descriptions-item>
      <a-descriptions-item label="身高(cm)">{{ health.height }}</a-descriptions-item>
      <a-descriptions-item label="体重(kg)">{{ health.weight }}</a-descriptions-item>
      <a-descriptions-item label="血型">{{ health.bloodType }}</a-descriptions-item>
      <a-descriptions-item label="血糖(mmol/L)">{{ health.bloodSugar }}</a-descriptions-item>
      <a-descriptions-item label="血压(mmHg)">{{ health.bloodPressure }}</a-descriptions-item>
      <a-descriptions-item label="遗传史">{{ health.genetic }}</a-descriptions-item>
    </a-descriptions>
    <a-divider></a-divider>
    <a-row>
      <a-col :span="4" :offset="11">
        <a-button type="info" @click="cancle">关闭</a-button>
      </a-col>
    </a-row>
  </a-modal>
</template>
<script>
import { Modal, message } from 'ant-design-vue'
import { ref, h, reactive, onMounted, toRefs, computed } from 'vue'
import { selectHealthFileById } from '@/api/order/index.js'
import health from '@/components/order/Health'
import Health from '@/components/order/Health'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    id: {
      type: Number,
      default: ''
    }
  },
  setup(props, { emit, attrs }) {
    // 取消，右上角这个关闭也要调用这个方法
    const cancle = () => {
      emit('closeModal')
    }
    const data = reactive({
      health: {}
    })
    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })

    init()
    async function init() {
      let res = await selectHealthFileById(props.id)
      if (res.success) {
        data.health = res.object

        for (const key in res.object) {
          if (!res.object[key]) {
            res.object[key] = '未填写'
          }
        }
      }
      console.log(res, '健康档案是')
    }
    onMounted(() => {})
    return {
      ...toRefs(data),
      cancle,
      modalVisible
    }
  }
}
</script>
